<template>
  <a-drawer
    width="50%"
    class="paper-list-drawer"
    :visible="value"
    :closable="false"
    :body-style="{ padding: '8px 8px 16px' }"
    @update:visible="$emit('update:value', $event)"
  >
    <template #title> 参考文献 </template>
    <template #extra>
      <a-space>
        <img src="@/assets/filter.png" class="filter" @click="showFilter = true" />
        <img src="@/assets/close.png" class="filter" @click="$emit('update:value', false)" />
      </a-space>
    </template>
    <template #footer>
      <a-row>
        <a-col span="24" :style="{ textAlign: 'right', paddingRight: '8px' }">
          <a-pagination
            v-model:current="current"
            v-model:pageSize="limit"
            :total="total"
            :show-size-changer="true"
            :show-total="(total: number) => `共${total}条`"
          />
        </a-col>
      </a-row>
    </template>
    <PaperFilter v-model:visible="showFilter" :ids="ids" @filter="handleFilter" />
    <a-spin :spinning="loading">
      <a-empty v-show="total === 0" />
      <PaperItem v-for="item in paperList" v-show="total !== 0" :key="item.paperId" :paper="item" />
    </a-spin>
  </a-drawer>
</template>
<script setup lang="ts">
import PaperFilter from './PaperFilter.vue'
import { ref, watch } from 'vue'
import { getMstPaperList, type IMstPaper } from '@/api/dialog'
import PaperItem from './PaperItem.vue'

const props = defineProps<{
  value: boolean
  ids: string
}>()

function scrollToTop() {
  const el = document.querySelector('.paper-list-drawer .ant-drawer-body')
  if (!el) return
  el.scrollTop = 0
}

defineEmits(['update:value'])
const showFilter = ref(false)
const loading = ref(true)
const query = ref({})
const total = ref(0)
const limit = ref(10)
const current = ref(1)
const paperList = ref<Array<IMstPaper>>([])

function handleFilter(q: any) {
  console.log('query', q)
  query.value = q
  current.value = 1
  loading.value = true
  getMstPaperList({
    ...query.value,
    ids: props.ids,
    limit: limit.value,
    current: current.value
  })
    .then((res) => {
      if (!res.data) return
      paperList.value = res.data.entity.rows
      total.value = res.data.entity.total
      showFilter.value = false
    })
    .finally(() => {
      loading.value = false
    })
}

watch(() => props.ids, () => {
  current.value = 1
  getPaperList()
})
watch(() => limit.value, getPaperList)
watch(() => current.value, getPaperList)
watch(() => props.value, () => {
  query.value = {}
  getPaperList()
})

function getPaperList() {
  if (!props.ids) return

  loading.value = true
  getMstPaperList({
    ...query.value,
    ids: props.ids,
    limit: limit.value,
    current: current.value
  })
    .then((res) => {
      if (!res.data) return
      const offset = limit.value * (current.value - 1)
      paperList.value = res.data.entity.rows.map((o, index) => {
        const realTtile = `${offset + index + 1}. ${o.title}`
        return {
          ...o,
          title: realTtile
        }
      })
      total.value = res.data.entity.total
    })
    .finally(() => {
      scrollToTop()
      loading.value = false
    })
}
</script>
<style scoped>
.filter {
  width: 24px;
  height: 24px;
  cursor: pointer;
}
</style>
